<template>
	<header class="header">
		<div class="container " id="app">
			<div class="header-content">
				<div class="logo" style="width: 160px; height: 50px;">
					<!-- 莱比特<span>物流</span> -->
				</div>
				<div class="nav-container">
					<ul class="nav-menu">
						<li class="nav-item" v-for="m in menuList" :key="m.name" :class="{'active': m.show}"> 
							<router-link :to="m.path" @click="toggleClass(m)">{{m.name}}</router-link>
						</li>
					</ul>
					
					<div class="header-notice" >
						<div class="scroll-container">
							<span v-for="n in noticeList" :key="n.id" class="scroll-line"><i class="fas fa-bullhorn" ></i> {{ n.content }}</span>
						</div>
					</div>
					<div v-if="isLogin" class="header-notice">
						<button class="btn btn-primary" @click="logout()" width="50px" height="30px">退出</button>
					</div>
				</div>
			</div>
		</div>
	</header>
</template>

<script>
import { getToken,removeToken } from '@/utils/auth'
import { getMenuList,getNoticeList } from '../api/customer'
// import { get } from 'core-js/core/dict';
	export default {
		name: 'HeaderComponent',		
		data() {
			return {
				isActive: false,
				isLogin: getToken() ? true : false,
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					total: 0,
					status: "1"
				},
				menuList: [
					// { name: '莱比特首页', path: '/',show : false },
					// { name: '项目服务', path: '/project', show : false },
					// { name: '配载物流', path: '/logistics', show : false },
					// { name: '在线服务', path: '/services', show : false },
					// { name: '关于我们', path: '/about/index' , show : false},
					// { name: '员工培训', path: '/employee', show : false },
					// { name: '人才招聘', path: '/hire', show : false },
					// { name: '联系我们', path: '/contact', show : false}
				],
				noticeList: [
					{ title: '莱比特公众号APP [2021/1/27] 打好防疫战线',id:1 },
					// { title: '莱比特公众号APP [2021/1/27] 打好防疫战线' ,id:2 },
					// { title: '莱比特公众号APP [2021/1/27] 打好防疫战线' ,id:3 },
					// { title: '莱比特公众号APP [2021/1/27] 打好防疫战线' ,id:4 }
				],
			}
		},
		created() {
			this.list()
			this.loadNoticelist()
			
		},
		methods: {
			list(){
				getMenuList(this.queryParams).then(res => {
					this.menuList = res.list;
				}).catch(err => {
					console.log(err)
				})
			},
			loadNoticelist(){
				getNoticeList(this.queryParams).then(res => {
					this.noticeList = res.list;
				}).catch(err => {
					console.log(err)
				})
			},
			goAbout() {
				// const router = useRouter();
				console.log('Navigating  to:', { name: 'About' })
				this.$router.push('/about')
				// router.push('/about')
				// const route = router.resolve({  name: 'about' })
				// console.log(route.href)  // 检查生成路径
				// router.push('/about').catch(err  => {
				// 	console.log(err)
				// })
			},
			logout() {
				removeToken();
				setTimeout(() => {
					// 刷新页面或者更新状态
					window.location.reload();
				}, 1000);
			},
			toggleClass(d){
				for(let i=0;i<this.menuList.length;i++){
					if(d.name == this.menuList[i].name){
						this.menuList[i].show = true
					} else {
						this.menuList[i].show = false
					}
				}
			}
		}
	}
</script>
<style scoped>
	@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
	.scroll-container {
  overflow: hidden; /* 隐藏溢出的内容 */
  position: relative;
  height: 18px;
  line-height: 18px;
}

.scroll-line {
  display: flex;
  flex-wrap: nowrap;
  animation: scroll 10s linear infinite; /* 滚动动画 */
  margin-top: 8px;
}

.icon {
  font-size: 24px;
  margin-right: 20px;
}

@keyframes scroll {
  0% {
    transform: translateY(0); /* 从上开始 */
  }
  25% {
    transform: translateY(-100%); /* 向上滚动一行 */
  }
  50% {
    transform: translateY(-100%); /* 保持第一行消失后的位置 */
  }
  75% {
    transform: translateY(-200%); /* 向上滚动到第二行 */
  }
  100% {
    transform: translateY(-200%); /* 保持第二行消失后的最终位置 */
  }
}
</style>
<style scoped src="../assets/css/common.css"></style>